<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../../resource/mui/css/mui.css" rel="stylesheet" />
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <a class=" mui-icon mui-icon-left-nav mui-pull-left" href="javascript:history.back()"></a>
    <h1 class="mui-title">您的书架</h1>
</header>
        <div  class="mui-scroll">
            <ul id='list' class="mui-table-view">
            </ul>
        </div>
<script src="../../resource/mui/js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
    var data = JSON.parse(localStorage.getItem("shuangxi"));
    mui.init();
    mui.ready(function() {
        var header = document.querySelector('header.mui-bar');
        var list = document.getElementById('list');
        list.style.marginTop = header.offsetHeight + 'px';
        fetch("/queryMyBooks.do?accountid="+data.id).then(res=>res.json()).then(data=>{
            data.forEach(function (item) {
var html='\
<li data="'+item.id+'"\
 style="height: 10vh;font-size: 5vh;line-height: 10vh;padding: 0 0 0 10vw" \
 class="mui-table-view-cell">\
 '+item.name+'</li>\
'

                document.querySelector("#list").innerHTML+=html

            });

            var list = document.querySelectorAll("li");
            list.forEach(function (item,index ) {
                item.addEventListener("tap",function () {
                    window.localStorage.setItem("change",this.getAttribute("data"))
                    window.location.href="./reader.html"
                })

            });

        })

    });
</script>
</body>

</html>
